// layout布局算法
export const useLayout = (layout, refs) => {
  const [l, r] = layout,
    [side, render, set, float] = refs;
  const sider = document.getElementById(side),
    renderer = document.getElementById(render),
    setter = document.getElementById(set),
    floater = document.getElementById(float);
  if (l == 0 && r == 0) {
    sider.style.flex = "220";
    renderer.style.flex = "1700";
    setter.style.display = "none";
    floater.style.display = "block";
  } else if (l == 0 && r == 1) {
    sider.style.flex = "220";
    renderer.style.flex = "1340";
    setter.style.display = "flex";
    setter.style.flex = "360";
    floater.style.display = "none";
  } else if (l == 1 && r == 1) {
    sider.style.flex = "560";
    renderer.style.flex = "1000";
    setter.style.display = "flex";
    setter.style.flex = "360";
    floater.style.display = "none";
  } else if (l == 1 && r == 0) {
    sider.style.flex = "560";
    renderer.style.flex = "1360";
    setter.style.display = "none";
    floater.style.display = "block";
  }
};

// lcd_engine_env环境变量判断 env | prod
export const lcd_engine_env = "dev";

export const lcd_engine_meta = {
  bg1: {
    attr: {
      w: 1920,
      h: 1080,
    },
    prop: {
      title: "",
    },
    global: [],
  },
  map1: {
    attr: {
      w: 1920,
      h: 1000,
    },
    prop: {
      relations: [
        "alarm_statistics1",
        "circuit_overview1",
        "performance_monitor1",
        "reinsurance_statistics1",
      ],
    },
    global: [],
  },
  performance_monitor1: {
    attr: {
      w: 400,
      h: 300,
    },
    prop: {
      title: "",
      times: [],
      circuits: [],
      displays: {},
    },
    global: [
      {
        key: "mapLevel",
        value: 2,
        isWork: true,
      },
      {
        key: "mapCode",
        value: 100000,
        isWork: true,
      },
    ],
  },
  alarm_statistics1: {
    attr: {
      w: 400,
      h: 200,
    },
    prop: {
      title: "",
      alarmPropsList: [],
    },
    global: [
      {
        key: "mapLevel",
        value: 2,
        isWork: true,
      },
      {
        key: "mapCode",
        value: 100000,
        isWork: true,
      },
    ],
  },
  reinsurance_statistics1: {
    attr: {
      w: 400,
      h: 200,
    },
    prop: {
      title: "",
      reinsuranceData: [],
    },
    global: [
      {
        key: "mapLevel",
        value: 2,
        isWork: true,
      },
      {
        key: "mapCode",
        value: 100000,
        isWork: true,
      },
    ],
  },
  circuit_overview1: {
    attr: {
      w: 400,
      h: 900,
    },
    prop: {
      title: "",
      projectStatusList: [],
    },
    global: [
      {
        key: "mapLevel",
        value: 2,
        isWork: true,
      },
      {
        key: "mapCode",
        value: 100000,
        isWork: true,
      },
    ],
  },
};

// 后续可对setter name进行key与name的映射 目前key和name一致
const getSetterName = (key) => `lcd-setter-${key}`;
const getSetterKey = (key) => `lcd-setter-${key}`;
const getSetterComponents = (meta) => {
  const components = [];
  Object.keys(meta).forEach((key) => {
    components.push({
      name: getSetterName(key),
      key: getSetterKey(key),
    });
  });
  return components;
};

// 后续可对sider name进行key与name的映射 目前key和name一致
const getSiderName = (key) => `lcd-sider-${key}`;
const getSiderKey = (key) => `lcd-sider-${key}`;
const getSiderComponents = (meta) => {
  const components = [];
  Object.keys(meta).forEach((key) => {
    components.push({
      name: getSiderName(key),
      key: getSiderKey(key),
    });
  });
  return components;
};

// new LCDEngine
const lcd_engine = {
  tooler: {
    save: {
      key: Symbol("save"),
      icon: "editor-save",
      label: "保存",
      trigger: {
        method: "click",
        name: "handleSave",
      },
    },
    preview: {
      key: Symbol("preview"),
      icon: "editor-preview",
      label: "预览",
      trigger: {
        method: "click",
        name: "handlePreview",
      },
    },
    undo: {
      key: Symbol("undo"),
      icon: "editor-undo",
      label: "上一步",
      trigger: {
        method: "click",
        name: "handleUndo",
      },
    },
    redo: {
      key: Symbol("redo"),
      icon: "editor-redo",
      label: "下一步",
      trigger: {
        method: "click",
        name: "handleRedo",
      },
    },
    exit: {
      key: Symbol("exit"),
      icon: "editor-exit",
      label: "退出",
      trigger: {
        method: "click",
        name: "handleExit",
      },
    },
  },
  renderer: {
    width: 1920,
    height: 1080,
  },
  share: {
    // 延迟时间
    delay: 500,
  },
  setter: {
    components: getSetterComponents(lcd_engine_meta),
  },
  sider: {
    components: getSiderComponents(lcd_engine_meta),
  },
};

export default lcd_engine;
